<template>
  <div id="seat">
    <h1 class="title">个股透视</h1>
    <div v-show="!loading">
      <div class="middle" v-show="showMid">
        <div class="middle-left">
          <h2>
            个股成功率 <span>{{ success }}</span>
          </h2>
          <div id="container"></div>
        </div>
        <div class="middle-right">
          <h2>
            跟买收益率 <span>{{ yied }}</span>
          </h2>
          <div id="container1"></div>
        </div>
      </div>
      <div class="data-wushuju" v-show="!showMid"></div>
      <h1 class="title">
        上榜数据
        <div class="date">
          <el-select
            v-model="tradeDate"
            placeholder="请选择"
            @change="selectDate"
          >
            <el-option
              v-for="item in dateList"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
      </h1>
      <div class="lower">
        <div class="lower-title">
          <div class="left"><span>当日上榜</span></div>
          <div class="right" v-if="onListName">{{ onListName }}</div>
        </div>
        <div v-show="show1">
          <table class="mb15" v-show="show1">
            <thead>
              <tr>
                <td class="left w180">买入营业部名称</td>
                <td class="left">席位类型</td>
                <!-- <td>次日上涨<br />概率</td> -->
                <td>买入金额</td>
                <td>卖出金额</td>
                <td>净额</td>
                <td class="left">标签</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in buyList" :key="item.id">
                <td class="left w180 yellow">
                  <el-popover
                    placement="bottom"
                    width="190"
                    :visible-arrow="false"
                    trigger="hover"
                    :content="item.branchName"
                  >
                    <span slot="reference"
                      >{{ item.branchName | filtration }}
                    </span>
                  </el-popover>
                </td>

                <td class="left">
                  <span class="type" :style="{ background: item.color }">{{
                    item.seatType
                  }}</span>
                </td>
                <!-- <td class="blue">{{item.pricechgAvgNext}}</td> -->
                <td class="red">{{ item.buyMoney | format }}</td>
                <td class="green">{{ item.sellMoney | format }}</td>
                <td>{{ item.netAmount | format }}</td>
                <td class="left">
                  <span
                    class="tag"
                    v-for="(it, index) in item.tagList"
                    :key="index"
                    >{{ it }}</span
                  >
                </td>
              </tr>
            </tbody>
          </table>
          <table v-show="show1">
            <thead>
              <tr>
                <td class="left w180">卖出营业部名称</td>
                <td class="left">席位类型</td>
                <!-- <td>次日上涨<br />概率</td> -->
                <td>买入金额</td>
                <td>卖出金额</td>
                <td>净额</td>
                <td class="left">标签</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in sellList" :key="item.id">
                <td class="left w180 yellow">
                  <el-popover
                    placement="bottom"
                    width="190"
                    :visible-arrow="false"
                    trigger="hover"
                    :content="item.branchName"
                  >
                    <span slot="reference"
                      >{{ item.branchName | filtration }}
                    </span>
                  </el-popover>
                </td>
                <td class="left">
                  <span class="type" :style="{ background: item.color }">{{
                    item.seatType
                  }}</span>
                </td>
                <!-- <td class="blue">{{item.pricechgAvgNext}}</td> -->
                <td class="red">{{ item.buyMoney | format }}</td>
                <td class="green">{{ item.sellMoney | format }}</td>
                <td>{{ item.netAmount | format }}</td>
                <td class="left">
                  <span
                    class="tag"
                    v-for="(it, index) in item.tagList"
                    :key="index"
                    >{{ it }}</span
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="wushuju" style="margin-top: 100px" v-show="!show1"></div>
      </div>
    </div>
    <div class="loadingBox" v-show="loading">
      <div class="loading"></div>
      <p>数据加载中...</p>
    </div>
  </div>
</template>
<script>
import { getStock, getTimeList, getBranchList } from "../api/index";
import * as Highcharts from "highcharts";
import highchartsMore from "highcharts/highcharts-more";
highchartsMore(Highcharts);
import { numberFormat } from "../script/util";

function formatedDate(date) {
  date = String(date);
  var pattern = /(\d{4})(\d{2})(\d{2})/;
  return date.replace(pattern, "$1-$2-$3");
}

function success(val) {
  val = Number(Math.round(val * 100 * 100) / 100);
  // if(!val) return;
  return val < 40 ? "较低" : "较高";
}
function yied(val) {
  val = Number(val);
  // if(!val) return;
  var text = "";
  if (val >= 2.5) {
    text = "较高";
  } else if (val >= 0 && val < 2.5) {
    text = "一般";
  } else {
    text = "较低";
  }
  return text;
}

function tagColor(str) {
  var color = "";
  switch (str) {
    case "龙头席位":
      color = "#F14D35";
      break;
    case "机构":
      color = "#4783F1";
      break;
    case "特殊席位":
      color = "#AF319D";
      break;
    case "新股专家":
      color = "#F9973D";
      break;
    case "敢死队":
      color = "#32CAE1";
      break;
    default:
      color = "#475561";
      break;
  }

  return color;
}

export default {
  data() {
    return {
      // show: false,
      show1: false,
      loading: true,
      tradeDate: "",
      stockObj: {},
      data1: [],
      data2: [],
      showMid: true,
      buyList: [],
      sellList: [],
      dateList: [],
      success: "",
      yied: "",
      onListName: "",
    };
  },
  filters: {
    format(val) {
      return numberFormat(val);
    },
    filtration(value) {
      if (!value) return;
      value = value.replace(/<\/?[^>]*>|&nbsp;/gi, "");
      if (value.length <= 22) {
        return value;
      } else {
        return value.substring(0, 22) + "...";
      }
    },
  },
  watch: {
    $route(to, from) {
      this.getStock();
    },
  },
  mounted() {
    window.reloadIndividual = ({ stockCode }) => {
      this.$route.params.stockCode = stockCode;
      this.getStock();
    };
    this.getStock();
  },
  methods: {
    selectDate(val) {
      var date = val.replace(/-/gi, "");
      this.getBranchList(date);
    },

    async getStock() {
      const { stockCode } = this.$route.params;
      await getStock({ stockCode }).then((back) => {
        
        if (back.status == 1) {
          let res = back.data;
          // if (res != undefined) {
          this.success = success(res.successRateNext);
          this.yied = yied(res.pricechgAvgNext);
          this.getTimeList();
          var list3 = [],
            list4 = [];
          list3.push(res.successRateNext);
          list3.push(res.successRateDay3);
          list3.push(res.successRateDay5);
          list3.push(res.successRateDay10);
          list3.push(res.successRateDay20);

          list4.push(res.pricechgAvgNext);
          list4.push(res.pricechgAvgDay3);
          list4.push(res.pricechgAvgDay5);
          list4.push(res.pricechgAvgDay10);
          list4.push(res.pricechgAvgDay20);
          var total1 = list3.reduce((total, num) => total + num);
          var total2 = list4.reduce((total, num) => total + num);

          if (total1 == 0 && total2 == 0) {
            this.showMid = false;
          } else {
            this.showMid = true;
            this.data1 = list3.map(
              (item) => Math.round(item * 100 * 100) / 100
            );
            this.data2 = list4.map(
              (item) => Math.round(item * 100 * 100) / 100
            );
            this.drow("container", this.data1);
            this.drow("container1", this.data2);
          }
        }
      });
    },
    async getTimeList() {
      const { stockCode } = this.$route.params;
      await getTimeList({ stockCode }).then((back) => {
        if (back.status == 1) {
          let res = back.data;
          this.getBranchList(res[0]);
          this.tradeDate = formatedDate(res[0]);
          this.dateList = res.map((item) => formatedDate(item));
        }
      });
    },
    async getBranchList(date) {
      const { stockCode } = this.$route.params;
      await getBranchList({
        tradeDate: date,
        stockCode,
      }).then((back) => {
        if (back.status == 1) {
          let res = back.data;
          //  const res = await api.getBranchList({tradeDate:20190508,stockCode:603178});
          // console.log("res", JSON.stringify(res) != "{}");
          if (JSON.stringify(res) != "{}") {
            this.onListName = res.onListName;
            var buy = res.buyBranch.slice(0, 5).map((item) => {
              item.netAmount = item.buyMoney - item.sellMoney;
              item.color = tagColor(item.seatType);
              item.tagList = item.tagType.split(",");
              return item;
            });
            var sell = res.sellBranch.slice(0, 5).map((item) => {
              item.color = tagColor(item.seatType);
              item.tagList = item.tagType.split(",");
              item.netAmount = item.sellMoney - item.buyMoney;
              return item;
            });

            this.sellList = sell;
            this.buyList = buy;
            this.show1 = true;
          } else {
            console.log("无数据");
          }
          this.loading = false;
        }
      });
    },

    drow(el, data, tick) {
      Highcharts.chart(el, {
        chart: {
          type: "line",
          spacing: [30, 5, 5, 5],
          plotBorderWidth: 1,
          backgroundColor: "#090910",
          borderColor: "#090910",
          plotBorderColor: "#1E2127",
          height: "240px",
          borderWidth: 1,
        },
        legend: {
          enabled: false,
        },
        credits: {
          enabled: false, // 禁用版权信息
        },
        title: {
          text: null,
        },
        xAxis: {
          categories: ["次日", "三日", "五日", "十日", "二十日"],
          lineWidth: 0,
        },
        yAxis: {
          tickAmount: 6,
          startOnTick: false,
          endOnTick: false,
          gridLineColor: "#1E2127",
          title: {
            text: "单位：%",
            align: "high",
            offset: 5,
            rotation: 0,
            y: -10,
            style: {
              fontWeight: "400",
              fontSize: "14px",
              color: "#999",
              textOutline: "none",
            },
          },
          labels: {
            format: "{value}",
          },
          maxPadding: 0.2,
        },
        plotOptions: {
          series: {
            color: "#FABE2E",
            shadow: true,
            lineWidth: 1,
            dataLabels: {
              enabled: true,
              allowOverlap: true, //设置允许重叠
              y: -5,
              style: {
                fontWeight: "400",
                fontSize: "13px",
                color: "#ffffff",
                paddingBottom: "5px",
                textOutline: "none",
              },
            },
          },
        },
        tooltip: {
          enabled: false,
        },
        series: [
          {
            data: data,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#seat {
  background: #090910;
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
h2 {
  color: #bcbfc4;
  font-size: 16px;
  span {
    margin-left: 16px;
    color: #ff8d27;
  }
}
.data-wushuju {
  margin: 0 auto;
  margin-top: 40px;
  width: 301px;
  height: 176px;
  background: url("../images/littleshuju.png") no-repeat;
  background-size: 100%;
}
.wushuju {
  margin: 0 auto;
  width: 401px;
  height: 233px;
  background: url("../images/wushuju.png") no-repeat;
  background-size: 100%;
}
.loadingBox {
  width: 100%;
  height: 743px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .loading {
    margin: 0 auto;
    width: 192px;
    height: 192px;
    background: url("../images/loading.gif") no-repeat;
    background-size: 100%;
  }
  p {
    font-size: 18px;
    color: #bbbfc3;
    margin-top: 28px;
  }
}
.title {
  display: flex;
  justify-content: space-between;
  height: 48px;
  padding-left: 20px;
  font-size: 20px;
  line-height: 48px;
  color: #ff8a00;
  background: rgba(39, 40, 46, 1);
  border: 1px solid rgba(0, 0, 0, 1);
  .date {
    margin-right: 20px;
  }
}

.middle {
  height: 263px;
  padding: 20px;
  display: flex;
  // border-bottom: 1px solid #27282E;

  .middle-left,
  .middle-right {
    width: 50%;
  }
}
.lower {
  scrollbar-width: none;
  -ms-overflow-style: none;

  padding: 10px 20px 6px 20px;
  .lower-title {
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 16px;
    margin-bottom: 8px;
    .left {
      color: #999;
      span {
        margin-right: 10px;
        padding-top: 7px;
        display: inline-block;
        &.select {
          color: #2c7eff;
        }
      }
      .line {
        position: relative;
        top: 2px;
        display: inline-block;
        width: 1px;
        height: 15px;
        background: #3e4048;
      }
    }
    .right {
      height: 29px;
      padding: 0 10px;
      background: rgba(28, 29, 33, 1);
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 4px;
      color: #ff8a00;
      line-height: 29px;
      text-align: center;
    }
  }
  .mb15 {
    margin-bottom: 15px;
  }
  table {
    width: 100%;
    color: #bcbfc4;
    font-size: 15px;
    text-align: right;
    line-height: 20px;

    .left {
      text-align: left;
    }
    .w180 {
      width: 180px;
    }

    // td {
    //   padding: 8px 6px;
    // }
    thead {
      background: #232429;
      td {
        padding: 8px 4px;
        border: 1px solid #323337;
      }
    }
    tbody {
      cursor: pointer;
      td {
        padding: 7px 4px;
        color: #e5e5e5;
        border: 1px solid #25262a;
        &.red {
          color: #e92727;
        }
        &.green {
          color: #31ed23;
        }
        &.blue {
          color: #02e2f4;
        }
        &.yellow {
          color: #f3f535;
        }
      }
      .type {
        display: inline-block;
        width: 70px;
        height: 21px;
        text-align: center;
        line-height: 21px;
        border-radius: 2px;
      }
      .tag {
        display: inline-block;
        width: 40px;
        height: 21px;
        line-height: 21px;
        text-align: center;
        color: #fff;
        background: rgba(67, 68, 82, 1);
        border-radius: 2px;
        margin-right: 5px;
        // margin-bottom: 5px;
        &:last-child {
          margin: 0;
        }
      }
    }
  }
}
</style>

<style>
.el-input__inner {
  color: #fff;
  text-align: center;
  font-size: 15px;
  width: 132px;
  height: 44px;
  background: rgba(39, 40, 46, 1);
  border: 1px solid rgba(39, 40, 46, 1);
  border-radius: 0;
}

.el-select,
.el-input.is-focus,
.el-input__inner {
  border: none;
}
.el-select-dropdown {
  text-align: center;
  color: #bbbfc3;
  font-size: 15px;
  border-radius: 0;
  height: 278px;
  background: rgba(37, 37, 41, 1);
  border: 1px solid #000;
  overflow: scroll;
}

.el-select-dropdown__item {
  text-align: right;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #1d1f2b;
  color: #fff;
}
.el-select-dropdown__item.selected {
  background: #2d3145 url("../images/sel.png") no-repeat;
  background-position: 10px 12px;
  color: #fff;
}
.el-popper[x-placement^="bottom"] {
  margin-top: 0;
}
.el-input__suffix-inner {
  line-height: 48px;
  display: block;
}
.el-icon-arrow-up:before {
  content: "\e78f";
  width: 12px;
  height: 8px;
}
.el-popover {
  box-sizing: border-box;
  padding: 10px;
  font-size: 14px;
  background: #1e202c;
  border: 1px solid #424664;
  color: #fff;
}
</style>
